<template>
  <div class="foodList">
    <v-header
    :fixed="true"
    :headerBg="headerBg"
    :fontColor="fontColor"
    title="美食">
      <div slot="right" class="foodAddressChange">
        <x-icon type="ios-search" size="26" style="padding: 2px 0px 0 10px" @click.stop="showSearch = true"></x-icon>
      </div>
    </v-header>

<!-- 筛选条件 -->
  <div class="filter">
    <span class="filterItem" @click="show0 = true" ref="filterAll">
      全部 &nbsp;
      <x-icon type="ios-arrow-up" size="20"></x-icon>
    </span>

    <span class="filterItem" @click="show1 = true" ref="filterNearby">
      附近 &nbsp;  
      <x-icon type="ios-arrow-up" size="20"></x-icon>
    </span>
  </div>

<!-- 菜单内容列表 -->
    <scroll>
      <div class="foodListItem" :style="{marginTop: marginTop + 'px'}" v-if="this.foodStoreList.length > 0">
        <div class="foodItem" v-for="item in foodStoreList" :key="item.id" @click="toFoodDetailsOne(item.id)">
          <img v-lazy="item.storeUrl[0]" alt="" v-if="item.storeUrl[0]">
          <div class="foodItemRight">
            <p class="foodTitle">{{item.name}}</p>
            <span class="foodAddress">{{item.address}}</span>
            <div class="price">
              <span class="priceDetails">¥ {{item.consumptionPerPerson}}</span>
            </div>
          </div>
        </div>
      </div>
      <not-data v-if="this.foodStoreList.length == 0" style="marginTop: 120px" tip="空空如也~<br>"></not-data>
      <div style="height: 110px;"></div>
    </scroll>


<!-- 筛选条件的popup -->
    <div v-transfer-dom>
      <popup v-model="show0" position="bottom" max-height="50%">
        <div v-for="(item, index) in foodCategoryRecommendList" :key="item.id"  @click="popupClick(item, index)">
          <cell :title="item.name"></cell>
        </div>
      </popup>
    </div>

    <div v-transfer-dom>
      <popup v-model="show1" position="bottom" max-height="50%">
        <div>
          11111111111
        </div>
      </popup>
    </div>

<!-- 搜索 -->
    <global-search v-model="showSearch" type="address" :range="[3]"></global-search>

  </div>
</template>

<script type='text/ecmascript-6'>
import axios from '@/api/axiosApi'
import VHeader from '@/components/v-header/v-header'
import { isIphoneX } from '@/assets/js/brower'
import Scroll from '@/components/scroll/scroll'
import { TransferDom, Popup, Cell } from 'vux'

import searchIcon from '@/assets/img/cart_shop_icon_search@3x.png'
import AIAvatar from '@/assets/img/cart_shop_icon_robot@3x.png'
import GlobalSearch from '@/components/global-search/global-search'

import headerBg from '@/assets/img/cart_headerBg.png'
import notData from '@/components/not-data/not-data'

export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      marginTop: 0,
      show0: false,
      show1: false,
      showSearch: false,
      searchIcon,
      AIAvatar,
      headerBg,
      fontColor: '#000',
      foodCategoryRecommendList: [],
      foodStoreList: []
    }
  },
  components: {
    VHeader,
    Scroll,
    Popup,
    Cell,
    GlobalSearch,
    notData
  },
  created () {
    this.getFoodCategoryRecommend()
    this.getFoodStore()
    if (isIphoneX) {
      this.marginTop = 66
    } else {
      this.marginTop = 66
    }
  },
  watch: {
    '$route'(to, from) {
      if (to.name === 'FoodList') {
        this.getFoodStoreFilter()
        this.getFoodStore()
      }
    }
  },
  methods: {
// 美食首页分类标签
    getFoodCategoryRecommend () {
      axios.get(this, `/v1/foodCategory?recommend=1`, null, (data) => {
        this.foodCategoryRecommendList = data
      })
    },
    popupClick (item, index) {
      this.getFoodStoreFilter(item.id)
      this.show0 = false
      this.show1 = false
    },
// 分类门店数据
    getFoodStore () {
      axios.get(this, `/v1/storeFood?areaId=${this.$route.params.addressInfoId}&categoryId=${this.$route.query.id}`, null, (data) => {
        data.forEach((item, index) => {
          item.storeUrl = item.storeUrl.split(';')
        })
        this.foodStoreList = data
        // console.log(this.foodStoreList)
      })
    },
// 通过筛选条件更换内容
    getFoodStoreFilter (id) {
      axios.get(this, `/v1/storeFood?areaId=${this.$route.params.addressInfoId}&categoryId=${id}`, null, (data) => {
        data.forEach((item, index) => {
          item.storeUrl = item.storeUrl.split(';')
        })
        this.foodStoreList = data
      })
    },
// 路由跳转至详情页
    toFoodDetailsOne (id) {
      this.$router.push({
        path: `/foodDetailsOne/${id}`
      })
    }
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.search{
  position absolute
  top 43%
  left 53%
  transform translate(-50%, -50%)
  display flex
  justify-content space-between
  align-items center
  color #fff
  border 1px solid rgba(255, 255, 255, 0.4)
  background #f5f5f5
  width 75%
  height 32px
  line-height 42px
  border-radius 30px
  padding 0 0px 0 18px
  font-size 16px
  .searchLeft{
    display flex
    align-items center
  }
}

.foodList {
  background $color-background
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  z-index 100
  .filter {
    display flex
    justify-content space-around
    font-size $font-size-title
    font-weight bold
    width 100%
    height 50px
    line-height 50px
    background #fff
    z-index 102
    position absolute 
    bottom 0px
    border-top 1px solid $color-border
    .filterItem {
      display flex
      align-items center
    }
  }
  .foodListItem {
    padding 0 15px 
    background #fff
    .foodItem {
      border-bottom 1px solid $color-border
      display flex
      // height 100px
      // line-height 200px
      padding 15px 0
      img {
        width 90px
        height 80px
        margin-right 10px
      }
      .foodItemRight {
        width 70%
        .foodTitle {
          font-size $font-size-title
          no-wrap()
          width 95%
        }
        .foodAddress {
          display block
          no-wrap()
          width 95%
          font-size $font-size-desc
          color $color-text-3
        }
        .price {
          display flex
          justify-content space-between
          width 90%
          margin-top 10px
          .priceDetails {
            font-size $font-size-title 
            font-weight bold
          }
          .btn {
            color $color-theme
          }
        }
      }
    }
  }
}

.foodAddressChange {
  display flex
  align-items center
  font-size $font-size-title
  padding 1px 0 1px 10px
  margin-top 1px
}
</style>
